import React from "react";

// 定义子组件

class LifeCycle extends React.Component {
  constructor(props) {
    console.log("进入constructor");

    super(props);

    // state 可以在 constructor 里初始化

    this.state = { text: "子组件的文本" };
  }

  // 初始化渲染时调用

  componentWillMount() {
    console.log("componentWillMount方法执行");
  }

  // 初始化渲染时调用

  componentDidMount() {
    console.log("componentDidMount方法执行");
  }

  // 父组件修改组件的props时会调用 如果父组件导致组件重新渲染，即使props 没有更改，也会调用 该方法

  componentWillReceiveProps(nextProps) {
    console.dir({ nextProps });
    console.dir(this.props);
    console.log("componentWillReceiveProps方法执行");
  }

  // 组件更新时调用

  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate方法执行");

    return true;
  }

  // 组件更新时调用

  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate方法执行");
    console.log({ nextProps });
    console.log({ nextState });
  }

  // 组件更新后调用
  componentDidUpdate(prevProps, prevState) {
    console.log("%ccomponentDidUpdate方法执行", "color:red;font-size:20px");
    console.log("上一次的props=======================");
    console.table(prevProps);
    console.log("this.props===========全部为更新后的");
    console.table(this.props);
    if (prevProps.dict2.list.length !== this.props.dict2.list.length) {
      console.log("dict2发起请求");
    }
    if (prevProps.dict.list.length !== this.props.dict.list.length) {
      console.log("dic1发起请求");
    }
    console.log("%ccomponentDidUpdate结束", "color:blue;font-size:20px");
  }

  // 组件卸载时调用

  componentWillUnmount() {
    console.log("子组件的componentWillUnmount方法执行");
  }

  // 点击按钮，修改子组件文本内容的方法

  changeText = () => {
    this.setState({
      text: "修改后的子组件文本",
    });
  };

  render() {
    console.log("render方法执行");

    return (
      <div className="container">
        <button onClick={this.changeText} className="changeText">
          修改子组件文本内容
        </button>

        <p className="textContent">{this.state.text}</p>

        <p className="fatherContent">{this.props.text}</p>

        <hr />
        <h1>使用深拷贝的</h1>
        <p>文本</p>
        <p>{this.props.dict.str}</p>
        <p>列表</p>
        <ul>
          {this.props.dict.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

// 定义 LifeCycle 组件的父组件

// class LifeCycleContainer extends React.Component {
//   // state 也可以像这样用属性声明的形式初始化

//   state = {
//     text: "父组件的文本",

//     hideChild: false,
//   };

//   // 点击按钮，修改父组件文本的方法

//   changeText = () => {
//     this.setState({
//       text: "修改后的父组件文本",
//     });
//   };

//   // 点击按钮，隐藏（卸载）LifeCycle 组件的方法

//   hideChild = () => {
//     this.setState({
//       hideChild: true,
//     });
//   };

//   render() {
//     return (
//       <div className="fatherContainer">
//         <button onClick={this.changeText} className="changeText">
//           修改父组件文本内容
//         </button>

//         <button onClick={this.hideChild} className="hideChild">
//           隐藏子组件
//         </button>

//         {this.state.hideChild ? null : <LifeCycle text={this.state.text} />}
//       </div>
//     );
//   }
// }
// 定义 LifeCycle 组件的父组件

class LifeCycleContainer extends React.Component {
  // state 也可以像这样用属性声明的形式初始化

  state = {
    text: "父组件的文本",

    // 新增的只与父组件有关的 state

    ownText: "仅仅和父组件有关的文本",

    hideChild: false,
    dict: {
      str: "原有父组件对象",
      list: ["a", "b", "c"],
    },
  };

  changeText = () => {
    this.setState({
      text: "修改后的父组件文本",
    });
  };

  // 修改 ownText 的方法

  changeOwnText = () => {
    this.setState({
      ownText: "修改后的父组件自有文本",
    });
  };

  hideChild = () => {
    this.setState({
      hideChild: true,
    });
  };

  changeDict = () => {
    const { dict } = this.state;
    dict.list.push("哈哈哈哈");
    dict.str = "更新后的对象的文本";
    this.setState(
      {
        dict,
        text: "修改后的父组件文本",
      },
      () => {
        console.log("更新后的字典", this.state);
      }
    );
  };

  render() {
    return (
      <div className="fatherContainer">
        {/* 新的button按钮 */}
        <h1>测试父组件的对象</h1>
        <p>文本</p>
        <p>{this.state.dict.str}</p>
        <p>列表</p>
        <ul>
          {this.state.dict.list.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={this.changeDict}>修改父组件的字典</button>
        <hr />
        <button onClick={this.changeOwnText} className="changeText">
          修改父组件自有文本内容
        </button>

        <button onClick={this.changeText} className="changeText">
          修改父组件文本内容
        </button>

        <button onClick={this.hideChild} className="hideChild">
          隐藏子组件
        </button>

        <p> {this.state.ownText} </p>

        {this.state.hideChild ? null : (
          <LifeCycle
            text={this.state.text}
            dict={JSON.parse(JSON.stringify(this.state.dict))}
            dict2={this.state.dict}
          />
        )}
      </div>
    );
  }
}

// ReactDOM.render(<LifeCircleContainer />, document.getElementById("root"));
export default LifeCycleContainer;
